<template>
	<view class="wz_black xd" style="width:100%;height:100%;">
    <scroll-view :scroll-y="true" @scrolltolower="scrolltolower"
                 style="height:calc(100vh - 1px);font-size: 14px" class="scrollView">
      <view class="sy_bg" style="padding-top: 20px">
        <!--    搜索栏-->
        <view class="wh_f wh_9 jz"  @click="selectShopList"
              style="background-color: #d6f1d3;border: 1px solid #3a9e5f;
              border-radius: 50px;
              padding:6px 2px">
          <view class="jz_flex" style="width: 50px">
            <view style="width: 20px">
              <view class="img_zfx">
                <image src="../../static/icon/ss_1.png" />
              </view>
            </view>
          </view>
          <view class="flex_1 czjz_flex">
            <up-input placeholder="限时美味|真材实料看得见......" border="none" v-model="textValue"
              style="color: #6b8073"></up-input>
          </view>
        </view>
        <view class="wh_9 jz" style="margin-top: 20px;">
          <img class="wh_max" src="../../static/img/shlf.png" style="max-height: 30px"  mode="widthFix" alt=""/>
        </view>
        <view v-if="list1" style="margin-top:10px;">
          <up-swiper
              @click="addBanner"
              :list="list1"
              keyName="images"
              previousMargin="30"
              nextMargin="30"
              height="200"
              circular
              :autoplay="true"
              radius="5"
              style="background-color: transparent!important;"
          ></up-swiper>
        </view>
      </view>
<!--      background-color: #f8faf7;-->
      <view class="boxs" style="padding:0 15px 15px">
        <!--      滚动通知-->
        <view class="wh_f" style="padding:5px 5px 10px">
          <view class="wz_jz centerdq" style="width: 30px">
            <image class="centerdq" src="../../static/icon/lb_1.png" style="width: 23px;height: 23px" />
          </view>
          <view class="flex_1 ccsl_1 centerdq scroll-container"
                style="height: 23px; overflow: hidden;">
            <text class="centerdq scroll-text" style="color:#ff9a2e;">
              每天中午12点前下单当日达!
            </text>
          </view>
        </view>
        <!--      十个菜单-->
        <view class="xyy bor_10 ba_white boxs ccgl bhh" style="padding: 5px;min-height: 180px">
          <view v-if="false" style="width: 20%;display: inline-block">
            <view class="mag_t-7" >
              <view @click="addkill">
                <view class="wh_max">
                  <view class="wz_jz">
                    <view class="disp bor_255 jz_flex" style="padding: 8px 6px;background-color: #ffffff">
                      <img src="../../static/img/xsms.png" style="width: 44px;height: 44px" />
                    </view>
                  </view>
                  <view class="wz_jz fz_12 wh_max">
                    限时秒杀
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view v-if="isTG" style="width: 20%;display: inline-block">
            <view class="mag_t-7" >
              <view @click="addTG">
                <view class="wh_max">
                  <view class="wz_jz">
                    <view class="disp bor_255 jz_flex" style="padding: 8px 6px;background-color: #ffffff">
                      <img src="../../static/icon/tg.png" style="width: 52px;height: 52px" />
                    </view>
                  </view>
                  <view class="wz_jz fz_12 wh_max">
                    团购
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view
                v-for="(item,index) in classList" :key="index"
                style="width: 20%;display: inline-block">
            <view
                class="mag_t-7" >
              <view
                    @click="addShopDetail(item)">
                <view class="wh_max">
                  <view class="wz_jz">
                    <image :src="item.image" style="width: 60px;height: 60px" />
                  </view>
                  <view class="wz_jz fz_12 wh_max">
                    {{ item?.name }}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class=" ddisp bhh">
            <view
                v-for="(item,index) in childrenList" :key="index"
                style="width: 20%;display: inline-block">
              <view class="mag_t-7">
                <view @click="addShopDetail(item)">
                  <view class="wh_max">
                    <view class="wz_jz">
                      <image :src="item.image" style="width: 60px;height: 60px" />
                    </view>
                    <view class="wz_jz fz_12 wh_max">
                      {{ item?.name }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!--      安心菜场-->
  <!--			<view style="margin-top: 20px">-->
  <!--				<image src="https://xdjzapi.towngo.cn/uploads/images/wx/202507/03/xcx_1751509326_yVl6hUDxlF.png"-->
  <!--               style="width: 100%;" mode="widthFix" />-->
  <!--			</view>-->
        <!--      今日疯抢-->
<!--        <view v-if="hdshopList.length>0" class="xyy ba_white bor_10"  style="margin-top: 10px">-->
<!--          <view class="wh_f_l pad_t-10">-->
<!--            <view class="wh_f">-->
<!--              <view>-->
<!--                <text class="fz_18 em mag_l-10 centerdq">今日疯抢</text>-->
<!--              </view>-->
<!--              <view class="flex_1">-->
<!--                <text class="mag_l-5 fz_10 centerdq"-->
<!--                       style="border: 1px solid #ffd166;background-color: #ff9a2e;color:white;padding: 1px 5px 1px 3px;border-radius: 5px">-->
<!--                  好货万人抢</text>-->
<!--              </view>-->
<!--            </view>-->
<!--            <view @click="toActList(shopList[0])" style="color: #808080">-->
<!--              <view class="wz_rigdq wh_f_l">-->
<!--                <view class="">-->
<!--                  <view class="wh_max">-->
<!--                    <text class="fz_12 centerdq"-->
<!--                          style="margin-top: -2px">爆款好货 低价天天抢</text>-->
<!--                    <img class="centerdq" src="../../static/icon/right.png" style="width: 6px;height: 10px;margin:0 10px 0 5px" />-->
<!--                  </view>-->
<!--                </view>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
<!--          <view class="pad_5 ddisp">-->
<!--            <view  @click="addDetail(item)" v-for="(item,index) in hdshopList" :key="index" class="pad_0_5 boxs" style="width: 25%">-->
<!--              <view class="img_zfx">-->
<!--                <view>-->
<!--                  <image :src="item.image[0]"/>-->
<!--                </view>-->
<!--              </view>-->
<!--              <view class="">-->
<!--                <view class="wz_jz ccsl_1 mag_5_0">{{ item?.name }}</view>-->
<!--                <view class="fz_12 bor_25 xd czjz_flex boxs"-->
<!--                  style="color:#f44336;height: 20px">-->
<!--                  <view class="" style="z-index: 1;padding-bottom: 4px">-->
<!--                      <text class="mag_l-10">￥</text>-->
<!--                      <text class="fz_12">-->
<!--                        {{ parseInt(item.price) }}-->
<!--                      </text>.<text class="fz_10">{{ String(item.price).split('.')[1] }}</text></view>-->
<!--                    <image class="jd" style="z-index: 0;left: 0;top: 0;width: 100%;max-height: 20px" mode="widthFix" src="../../static/img/q.png"></image>-->
<!--                  </view>-->
<!--                <view class="wz_jz" style="color: #808080">-->
<!--                  <text style="text-decoration: line-through;">￥{{ item.re_price }}</text>-->
<!--                </view>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
<!--        </view>-->
        <!--      新品开箱 夏日榜单-->
<!--        <view v-if="shopList[1] ||  shopList[2]" class="ddisp" style="padding-top: 10px">-->
<!--          <view v-if="shopList[1]" @click="toActList(shopList[1])" style="width: calc(50% - 5px)" class="xyy ba_white bor_10 pad_10 boxs">-->
<!--            <view>-->
<!--              <text class="fz_18 em centerdq" style="color: #525252">{{ shopList[1]?.name }}</text>-->
<!--              <text class="mag_l-5 fz_10 centerdq"-->
<!--                style="border: 1px solid #ffd166;background-color: #ff9a2e;color:white;padding: 1px 5px 1px 3px;border-radius: 5px">-->
<!--                上新日历</text>-->
<!--              <view class="centerdq" style="color: #3a9e5f;padding: 12px 0">{{  shopList[1]?.remark }}</view>-->
<!--              <view class="wh_f">-->
<!--                <view class="flex_1">-->
<!--                  <view>-->
<!--                    <view class="img_zfx">-->
<!--                      <image :src="shopList[1]?.images[0]"  />-->
<!--                    </view>-->
<!--                  </view>-->
<!--                </view>-->
<!--                <view style="width: 10px"></view>-->
<!--                <view class="flex_1">-->
<!--                  <view>-->
<!--                    <view class="img_zfx">-->
<!--                      <image :src="shopList[1]?.images[1]"  />-->
<!--                    </view>-->
<!--                  </view>-->
<!--                </view>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
<!--          <view style="width: 10px"></view>-->
<!--          <view v-if="shopList[2]" @click="toActList(shopList[2])" style="width: calc(50% - 5px)" class="xyy ba_white bor_10 pad_10 boxs">-->
<!--            <view>-->
<!--              <text class="fz_18 em centerdq" style="color: #525252">{{  shopList[2]?.name }}</text>-->

<!--              <text class="mag_l-5 fz_10 centerdq" style="border: 1px solid #ffd166;background-color: #ff9a2e;color:white;padding: 1px 5px 1px 3px;border-radius: 5px">-->
<!--                大牌严选</text>-->
<!--            <view class="centerdq" style="color: #3a9e5f;padding: 12px 0">{{  shopList[2]?.remark }}</view>-->
<!--              <view class="wh_f">-->
<!--                <view class="flex_1">-->
<!--                  <view>-->
<!--                    <view class="img_zfx">-->
<!--                      <image :src="shopList[2]?.images[0]" />-->
<!--                    </view>-->
<!--                  </view>-->
<!--                </view>-->
<!--                <view style="width: 10px"></view>-->
<!--                <view class="flex_1">-->
<!--                  <view>-->
<!--                    <view class="img_zfx">-->
<!--                      <image :src="shopList[2]?.images[1]"  />-->
<!--                    </view>-->
<!--                  </view>-->
<!--                </view>-->
<!--              </view>-->
<!--          </view>-->
<!--        </view>-->
<!--        </view>-->
        <!--      推荐商品列表  -->
        <view class="wh_f mag_t-10">
          <view class="flex_1">
            <view @click="addDetail(item)" v-for="(item,index) in list" :key="index">
              <view v-if="index % 2 == 0"
                    class="ba_white xyy bor_10" style="margin-bottom: 10px">
                <view class="img_zfx" style="width:100%">
                  <view>
                    <image :src="item?.image[0]" alt=""/>
                  </view>
                </view>
                <view class="pad_5_10 boxs fz_12">
                  <view class="fz_16 em ccsl_2">
                    {{ item?.name }}
                  </view>
                  <view class="wz_huang" style="padding: 4px">{{ item.sales }}人买过</view>
                  <view style="padding-bottom: 2px">
                    <text class="scx wz_hui fz_12 centerdq mag_l-5"> ¥ {{item.re_price}}</text>
                  </view>
                  <view class="wh_f pad_b-10">
                    <view class="flex_1 wz_red">
                      <text class="">¥</text>
                      <text class="fz_16 em">{{ parseInt(item.price) }}</text>
                      <text class="fz_10 em ">.{{ String(item.price).split('.')[1] }}</text>
<!--                      <text class=" fz_10 mag_l-5">折后价</text>-->
                    </view>
                    <view>
                      <img @click.stop="addShop(item)" class="centerdq" src="../../static/img/tianjia.png"
                           style="width: 20px;height: 20px" alt="">
                    </view>
                  </view>


                  <view v-if="false" class="split_3">
                    <view class=" wz_rigdq">
                      <image v-if="item.cart_amount>0" @click.stop="addShopList(false,item,index,$event)"
                             class="centerdq" src="../../static/img/jianshao.png"
                             style="width: 20px;height: 20px"/>
                    </view>
                    <view class="wz_jz centerdq">
                      <text v-if="item.cart_amount>0" class="centerdq">{{ item.cart_amount }}</text>
                    </view>
                    <view>
                      <image @click.stop="addShopList(true,item,index)" class="centerdq"
                             src="../../static/img/tianjia.png"
                             style="width: 18px;height: 18px"/>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view style="width: 10px"></view>
          <view class="flex_1">
            <view @click="addDetail(item)" v-for="(item,index) in list" :key="index">
              <view v-if="index % 2 == 1"
                    class="ba_white xyy bor_10" style="margin-bottom: 10px">
                <view class="img_zfx" style="width:100%">
                  <view>
                    <image :src="item?.image[0]" alt=""/>
                  </view>
                </view>
                <view class="pad_5_10 boxs fz_12">
                  <view class="fz_16 em ccsl_2">
                    {{ item?.name }}
                  </view>
                  <view class="wz_huang" style="padding: 4px">{{ item.sales }}人买过</view>
                  <view style="padding-bottom: 2px">
                    <text class="scx wz_hui fz_12 centerdq mag_l-5"> ¥ {{item.re_price}}</text>
                  </view>
                  <view class="wh_f pad_b-10">
                    <view class="flex_1 wz_red">
                      <text class="">¥</text>
                      <text class="fz_16 em">{{ parseInt(item.price) }}</text>
                      <text class="fz_10 em ">.{{ String(item.price).split('.')[1] }}</text>
                      <!--                      <text class=" fz_10 mag_l-5">折后价</text>-->
                    </view>
                    <view>
                      <img @click.stop="addShop(item)" class="centerdq" src="../../static/img/tianjia.png"
                           style="width: 20px;height: 20px" alt="">
                    </view>
                  </view>


                  <view v-if="false" class="split_3">
                    <view class=" wz_rigdq">
                      <image v-if="item.cart_amount>0" @click.stop="addShopList(false,item,index,$event)"
                             class="centerdq" src="../../static/img/jianshao.png"
                             style="width: 20px;height: 20px"/>
                    </view>
                    <view class="wz_jz centerdq">
                      <text v-if="item.cart_amount>0" class="centerdq">{{ item.cart_amount }}</text>
                    </view>
                    <view>
                      <image @click.stop="addShopList(true,item,index)" class="centerdq"
                             src="../../static/img/tianjia.png"
                             style="width: 18px;height: 18px"/>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!--      底部加载提示-->
        <view v-if="jzisTrue === 1" style="height: 20px"></view>
        <view v-if="jzisTrue === 2" class="wz_jz">
            <view style="height: 26px">
              <text class="centerdq">
                <text class="fz_14" style="margin-right: 10px">加载中</text>
              </text>
              <view class="disp centerdq">
                <view class="jzjdt"></view>
              </view>
            </view>
        </view>
        <view v-if="jzisTrue === 3" class="wz_jz">
            <view style="height: 16px">
              <text class="centerdq">
                <text class="fz_14 wz_qhui">没有更多商品了</text>
              </text>
            </view>
        </view>
      </view>
      <up-toast ref="uToastRef"></up-toast>
    </scroll-view>
    <up-popup
        :mask-closable="true"
        @close="close"
        @open="open"
        customStyle="border-radius: 20px 20px 0 0"
        :show="show"
        mode="bottom">
      <view>
        <view class="wh_f_r" style="background-color: #f5f5f5;border-radius: 20px 20px 0 0;padding:20px">
          <view style="width: 100px;">
            <view class="img_zfx">
              <img :src="additem?.image[0]"/>
            </view>
          </view>
          <view class="pad_l-20">
            <view class="wh_f_l">
              <view>{{ additem.name }}</view>
              <view>
                <up-icon @click="close" name="close" color="#383838" size="20"></up-icon>
              </view>
            </view>
            <view class="pad_10_0 fz_12">{{ additem.category_pstr }}</view>
            <view>
              <text class="wz_red ">¥{{ additem.discount }}</text>
              <text class="fz_12"> / {{ additem.specs }}</text>
            </view>
          </view>
        </view>
        <view style="padding: 20px">
          <view class="wh_f_l">
            <view class="fz_14">购买数量</view>
            <view>
              <up-number-box class="centerdq" button-size="26" buttonWidth="26"
                             @change="valChange($event,additem)"
                             v-model="additem.amount"
                             :min="1"></up-number-box>
            </view>
          </view>
          <view style="padding-top: 20px">
            <view @click="addShoppingCars" class="bor_25 pad_10 wz_jz fz_14 wz_white" style="background-color:#3a9e5f">加入购物车</view>
          </view>
        </view>

      </view>
    </up-popup>
  </view>
</template>
<script>
import {
  addCartAmount,
  addShoppingCart, adPositions, bannerList, delCart, doSign,
  getAct,
  getactivityShopList, getShopCartCount,
  getShopClassList,
  getShopGoodsList,
  gettwoShopList, goodsListNew
} from "../../Api/shop";
//在要使用服务的页面
var QQMapWX = '@/utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js';
let qqmapsdk;
  export default {
    components: {},
		data() {
			return {
        msg:'',
        isTG:false,
        show:false,
        jzisTrue:1,
				title: 'Hello',
				textValue: '',
        classList:[],
        childrenList:[],
        list:[],
        shopList:[],
        hdshopList:[],
        list1: [
          {
            id:1,
            image_path:"https://xdjzapi.towngo.cn/uploads/images/wx/202508/26/xcx_1756171570_j2K8hWAizy.jpg",
          }
        ],
        page:1,
        additem:{
          image:[]
        },
        ifOnShow:false,
			}
		},
    onHide(){
      this.ifOnShow=true
    },
		onLoad() {
      // 获取轮播图
      // bannerList().then(res => {
      //   this.list1 = res
      // })
      // 首页十个菜单
      gettwoShopList({
        page:1,
        per_page:10
      }).then(res=>{
        let num = parseInt(res.data.length/2)
        console.log("一半",num)
        res.data.forEach((item,index)=>{
          if(index<=num){
            this.classList.push(item)
          }
        })
        res.data.forEach((item,index)=>{
          if(index>num){
            this.childrenList.push(item)
          }
        })
      })
      //获取推荐商品
      this.getList()
      adPositions().then(res=>{
        this.list1 = res.data
        console.log("轮播图",this.list1)
      })

      // uni.navigateTo({
      //   url: '/user/login/index'
      // });

      // uni.navigateTo({
      //   url:'/porder/orderList/index'
      // })

      // uni.navigateTo({
      //   url: `/shophome/itemshopDetail/index?id=${4404}`
      // });

      // uni.switchTab({
      //   url: '/pages/shoppingCart/index'
      // });


		},
    onShow(){
      this.page = 1
      getShopCartCount().then(res => {
        if(res.data.count>0){
          uni.setTabBarBadge({
            index: 2,
            text: String(res.data.count)
          })
        }else{
          uni.removeTabBarBadge({
            index:2
          })
        }
      })
      // this.getShopList()
      // this.getList()
      this.getActList()
      this.getTGList()
    },
		methods: {
      // 团购列表
      getTGList(){
        goodsListNew({get_type:4}).then(res=>{
          if(res.data.length>0){
            this.isTG = true
          }
        })
      },
      // 点击轮播图操作
      addBanner(e){
        let item = this.list1[e]
        switch (item.type){
          case "banner1":
            this.addShopDetail({id:parseInt(item.remark)})
            break;
          case "banner2":
            console.log("公众号",item)
            let data = JSON.stringify({
              url : item.data,
              name : item.name,
            })
            uni.navigateTo({
              url: `/shophome/webView/index?data=${data}`
            });
            // wx.navigateTo({
            //   url: 'https://mp.weixin.qq.com/s/K2A94f2OFHSnb9bf_BhUKQ'
            // });
            break;
        }
      },
      // 秒杀
      addkill(){
        uni.navigateTo({
          url: '/shophome/Snapped/index'
        });
      },
      // 去团购
      addTG(){
        uni.navigateTo({
          url: '/pagesList/itembuy/index'
        });
      },
      //确认添加购物车
      addShoppingCars(){
        addShoppingCart({
          goods_id:this.additem.id,
          amount:this.additem.amount
        }).then(res=>{
          if(res.success){
            this.getShopCartCount()
            this.showToast('加购成功!')
            this.show = false
          }else{
            this.show = false
          }
        })
      },
      // 添加/删除购物车的按钮事件
      valChange(e){
        this.additem.amount = e.value
      },
      // 分页
      scrolltolower(){
        // 如果 jzisTrue = 3 没有更多数据了
        if(this.jzisTrue === 3){

        }else{
          if(this.page === 1){
            this.page += 1
          }
          this.jzisTrue = 2
          // 触底了
          setTimeout(()=>{
            this.jzisTrue = 1
            this.getfyList()
          },1000)
        }
      },
      //购物车角标
      getShopCartCount(){
        getShopCartCount().then(res => {
          uni.setTabBarBadge({
            index: 2,
            text: String(res.data.count)
          })
        })
      },
      // 活动商品详情
      toActList(e){
        let data = JSON.stringify({
          name : e.name,
          id : e.id
        })
        uni.navigateTo({
          url: `/pagesList/ActList/index?data=${data}`
        });
      },
      //跳转搜索页
      selectShopList(){
        uni.navigateTo({
          url: '/pagesList/shopList/index'
        });
      },
      //前往商品详情
      addDetail(e){
        const params = { id:e.id}; // 待传递的参数
        uni.navigateTo({
          url: `/shophome/shopDetail/index?id=${params.id}`
        });
      },
      //添加商品或减少商品数量
      addShopList(t,item,index,data){
        // 添加
        if(t){
          // 下单数量小于库存
          if(this.listShop[index].cart_amount<item.stock){
            addShoppingCart({
              goods_id:item.id
            }).then(res=>{
              this.listShop[index].cart_amount += 1
              this.shopNum += 1
              this.countShop()
              this.getShopCartCount()
            }).catch(err=>{
              console.log('失败了')
            })
          }else{
            this.showToast('库存不足')
          }
          // 减少
        }else{
          delCart({
            goods_id:item.id,
            amount:1
          }).then(res=>{
            this.listShop[index].cart_amount -= 1
            this.countShop()
            this.getShopCartCount()
          })
        }
      },
      // 活动列表
      getActList(){
        getAct().then(res=>{
          this.shopList = res.data
          console.log('活动列表1',res.data)
          this.getShopList(res.data[0].id)
        })
      },
      // 活动商品列表
      getShopList(e){
        getactivityShopList({
          act_id:e
        }).then(res=>{
          console.log('活动商品列表2',res.data)
          this.hdshopList = res.data.data
        })
      },
      // 关闭弹窗
      close(){
        this.show = false
      },
      // 添加购物车
      addShop(e){
        this.additem = e
        this.additem.amount = 1
        this.show = true
        // addShoppingCart({
        //   goods_id:e.id
        // }).then(res=>{
        //   this.getShopCartCount()
        //   this.showToast('加购成功!')
        // }).catch(err=>{
        //   this.showToast('加购失败!')
        // })
      },
      //消息提示
      showToast(msg, type = "default") {
        uni.showToast({
          title: msg,
          icon: "none", // 图标类型，可选值：success, none
          duration: 2000 // 显示时间，单位毫秒
        });
      },
      //获取推荐列表
      getList(){
        getShopGoodsList({
          hots_type:1,
          page:1
        }).then(res=>{
          this.list = res.data.data; // 或者使用:
        })
      },
      //获取推荐列表
      getfyList(){
        getShopGoodsList({
          hots_type:1,
          page:this.page
        }).then(res=>{
          // 如果没有数据 说明已经没有更多数据了 改变底部加载状态为3
          if(res.data.data.length<1){
            this.jzisTrue = 3
          }else{
            this.page += 1
            //有数据 正常合并新的数据
            this.list = this.list.concat(res.data.data); // 或者使用:
          }
        })
      },
      // 前往商品分类
      addShopDetail(e){
        console.log('数据结果',e)
        uni.setStorageSync('classTabs',{list: {id:e.id}})
        uni.switchTab({
          url:'/pages/classify/index'
        })
      }
		},
    //1.分享微信
    onShareAppMessage() {
      return{
        title:'鲜到家族云享集市',
        path:'/pages/index/index'
      }
    },
    //2.配置分享到朋友圈
    onShareTimeline(){
      return{
        title: '鲜到家族云享集市',                //分享的标题
        query: '/pages/index/index',     //点击分享链接之后进入的页面路径
        imageUrl: '/static/img/logo.jpg' //分享发送的链接图片地址
      }
    }
	}
</script>

<style lang="css">
.jzjdt {
  border: 3px solid hsla(185, 100%, 62%, 0.2);
  border-top-color: #3a9e5f;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.cssjz {
  width: 2.5em;
  height: 3em;
  border: 3px solid transparent;
  border-top-color: #fc2f70;
  border-bottom-color: #fc2f70;
  border-radius: 50%;
  animation: spin-stretch 2s ease infinite;
}
@keyframes spin-stretch {
  50% {
    transform: rotate(360deg) scale(0.4, 0.33);
    border-width: 3px;
  }
  100% {
    transform: rotate(720deg) scale(1, 1);
    border-width: 3px;
  }
}


.balls {
  width: 4em;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}

.balls view {
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background-color: #3a9e5f;
}

.balls view:nth-of-type(1) {
  transform: translateX(-100%);
  animation: left-swing 0.5s ease-in alternate infinite;
}

.balls view:nth-of-type(3) {
  transform: translateX(-95%);
  animation: right-swing 0.5s ease-out alternate infinite;
}

@keyframes left-swing {
  50%,
  100% {
    transform: translateX(95%);
  }
}

@keyframes right-swing {
  50% {
    transform: translateX(-95%);
  }
  100% {
    transform: translateX(100%);
  }
}


.he_0{
  height: 0;
  display: none;
  margin-top: 0!important;
}
.SelectInput{
  display: flex;
}
.SelectInput>view{
  display: flex;
}
/*image{
  height: auto;
  object-fit: contain;
}*/
.pad_l{
  padding: 0 5px 0 0;
}
.pad_r{
  padding: 0 0 0 5px;
}
</style>

